<template>
    <div class="white-setting">
        <search-form :searchArray="searchArray" :searchObj="searchObj">
            <el-button class="btn search mL20" @click="add">新增</el-button>
        </search-form>
        <elTable :formData="formData">
                <el-table-column prop="name" label="终端客户名称" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="手机号码" align="center"></el-table-column>
                <el-table-column prop="area" label="收货地区" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="goSettingGoods(scope.row)">商品配置</el-button>
                        <el-button type="text"  @click="deletes(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        title="添加"
        width="700px"
        hideButton
        >
            <search-form :searchArray="searcA" :searchObj="searchObj" :boxShadow="false">
            </search-form>
            <elTable :formData="formDatas">
                <el-table-column prop="name" label="终端客户名称" align="center"></el-table-column>
                <el-table-column prop="phone" width="120px" label="手机号码" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="addUser(scope.row)">添加</el-button>
                    </template>
                </el-table-column>
        </elTable>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'whiteSetting',
    components: {
        elTable
    },
    data () {
        return {
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 2,
                data: [
                    {
                        id: '1',
                        name: '老百姓大药房',
                        phone: '15558007252',
                        area: '广东省_广州市_花都区'
                    },
                    {
                        id: '2',
                        name: '西湖大药房',
                        phone: '15558007251',
                        area: '浙江省_杭州市_西湖区'
                    }
                ]
            },
            formDatas: {
                currentPage: 1,
                pageSize: 10,
                total: 2,
                data: [
                    {
                        id: '3',
                        name: '老百姓大药房2',
                        phone: '15558007253',
                        area: '广东省_广州市_花都区'
                    }
                ]
            },
            searchObj: {
                name: '',
                phone: '',
                area: ''
            },
            searcA: [
                {
                    type: 'input',
                    value: '',
                    label: '终端客户名称',
                    placeholder: '请输入终端客户名称',
                    key: 'name'
                }
            ],
            searchArray: [
                {
                    type: 'input',
                    value: '',
                    label: '终端客户名称',
                    placeholder: '请输入终端客户名称',
                    key: 'name'
                },
                {
                    type: 'select',
                    value: {
                        value: []
                    },
                    label: '收货地区',
                    placeholder: '请选择',
                    key: 'area',
                    list: []
                },
                {
                    type: 'input',
                    value: '',
                    label: '手机号码',
                    placeholder: '请输入手机号码',
                    key: 'phone'
                },
            ],
            visible: {
                show: false
            }
        }
    },
    methods: {
        add () {
            this.visible.show = true
        },
        addUser (item) {
            let lists = this.formData.data
            if (lists.filter(r => r.id == item.id).length) {
                lists = lists
                this.$message.error('已添加过，请勿重复添加')
            } else {
                lists.unshift(item)
                this.$message.success('添加成功')
            }
            this.visible.show = false
            setTimeout(() => {
                this.$set(this.formData, 'data', lists)
            }, 1000)
        },
        goSettingGoods (item) {
            this.$router.push({
                path: '/control-sale/goods',
                query: {
                    id: item.id
                }
            })
        },
        deletes (item, index) {
            this.$confirm('确定要删除么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.formData.data.splice(index,1)
                    this.$message.success('删除成功')
                }).catch(() => {
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.white-setting {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>